<template>
  <van-tabbar v-model="active" fixed>
    <van-tabbar-item
      v-for="(item,index) in list"
      :key="index"
      :icon="item.icon"
      :to="{path: item.path}"
    >{{item.text}}
    </van-tabbar-item>
  </van-tabbar>
</template>

<script>
  import {Tabbar, TabbarItem, Icon} from 'vant';

  export default {
    name: "CommonNavbar",
    components: {
      [Tabbar.name]: Tabbar,
      [TabbarItem.name]: TabbarItem,
      [Icon.name]: Icon,
    },
    data() {
      return {
        list: [
          {path: '/Documents', icon: 'photo', text: '我的作品'},
          {path: '/Templates', icon: 'cart', text: '模板商城'},
          {path: '/Personals', icon: 'contact', text: '个人信息'},
        ],
        active: 0,
      }
    },
    methods:{
      checkIcon(){
        let _this = this;
        if(_this.$route.path==='/Documents') _this.active=0;
        else if(_this.$route.path==='/Templates') _this.active=1;
        else if(_this.$route.path==='/Personals') _this.active=2;
      }
    },
    mounted(){
      let _this = this;
      _this.checkIcon();
    },
    watch: {
      // 检查url是否变化
      "$route": function (val, oldVal) {
        // 检查token存在，是否为'/Login'
        let _this = this;
        if(val.path==='/Documents') _this.active=0;
        else if(val.path==='/Templates') _this.active=1;
        else if(val.path==='/Personals') _this.active=2;
      },
      // 深度观察监听
      deep: true
    },
  }
</script>

<style scoped>
</style>
